<html>
<head>
    <title>Agent Timeline</title>
    <link rel='stylesheet' href='styles.css' type='text/css' />
    <link rel="alternate" type="application/rdf+xml" href="doap.rdf" />
    
    <script src="api/timeline-api.js?bundle=true" type="text/javascript"></script>
	<script src="examples.js" type="text/javascript"></script>
	
    <script>
        var tl;
		var eventSource;

        function onLoad() {
            eventSource = new Timeline.DefaultEventSource();
            
			var toDay = new Date();
			var startDate = new Date(toDay.getFullYear(), toDay.getMonth(), toDay.getDate() - 30, toDay.getHours() - 1, 0, 0);
			var endDate = new Date(toDay.getFullYear(), toDay.getMonth(), toDay.getDate() + 30, toDay.getHours() + 1, 0, 0);
			
            var zones = [
                {   start:    startDate.toString(),
                    end:      endDate.toString(),
                    magnify:  5,
                    unit:     Timeline.DateTime.MINUTE,
                    multiple: 10
                }
            ];
            var zones2 = [
                {   start:    startDate.toString(),
                    end:      endDate.toString(),
                    magnify:  5,
                    unit:     Timeline.DateTime.MINUTE,
                    multiple: 60
                }
            ];
            
			var zones3 = [
                {   start:    startDate.toString(),
                    end:      endDate.toString(),
                    magnify:  1,
                    unit:     Timeline.DateTime.DAY
				}
            ];
			
            var theme = Timeline.ClassicTheme.create();
			theme.autoWidth = true;
			Timeline.ThemeName = 'dark-theme'
			
            theme.event.bubble.width = 250;
            
            var date = "Mon Jun 03 2009 21:00:00 GMT+0100";
            var bandInfos = [
                Timeline.createHotZoneBandInfo({
                    width:          "80%", 
                    intervalUnit:   Timeline.DateTime.HOUR, 
                    intervalPixels: 100,
                    zones:          zones,
                    eventSource:    eventSource,
                    date:           date,
                    timeZone:       2,
					overview:	false
                  //  theme:          theme
                }),
				Timeline.createHotZoneBandInfo({
                    width:          "10%", 
                    intervalUnit:   Timeline.DateTime.DAY, 
                    intervalPixels: 200,
                    zones:          zones2, 
                    eventSource:    eventSource,
                    date:           date, 
                    timeZone:       2,
                    overview:       true
                   // theme:          theme
                }),
				Timeline.createHotZoneBandInfo({
					width:			"10%",
					intervalUnit:	Timeline.DateTime.DAY,
					intervalPixels:	200,
					zones:			zones3,
					eventSource:	eventSource,
					date:			date,
					timeZone:		2,
					overview:		true
				})
			];
            bandInfos[1].syncWith = 0;
            bandInfos[1].highlight = true;
			
			bandInfos[2].syncWith = 0;
            bandInfos[2].highlight = true;
            
			tl = Timeline.create(document.getElementById("tl"), bandInfos, Timeline.HORIZONTAL);

			reloadData();
			
			setupFilterHighlightControls(document.getElementById("tl2"), tl, [0,1], theme);
        }
        
        var resizeTimerID = null;
        function onResize() {
            if (resizeTimerID == null) {
                resizeTimerID = window.setTimeout(function() {
                    resizeTimerID = null;
                    tl.layout();
                }, 500);
            }
        }
		
		function reloadData() {
			eventSource.clear();
			tl.loadXML("data/events.xml?uid=" + new Date(), function(xml, url) { 
				eventSource.loadXML(xml, url); 
				//var date = eventSource.getLatestDate();
				//tl.getBand(0).setCenterVisibleDate(date);
			});
			
			tl.layout();		
		}
		
		function moveToFirst() {
			tl.getBand(0).setCenterVisibleDate(eventSource.getEarliestDate());
		}
		
		function moveToLatest() {
			tl.getBand(0).setCenterVisibleDate(eventSource.getLatestDate());
		}
		
		function themeSwitch(){
			var timeline = document.getElementById('tl');		
			timeline.className = (timeline.className.indexOf('dark-theme') != -1) ? timeline.className.replace('dark-theme', '') : timeline.className += ' dark-theme';
			
		}
    </script>
	<style type="text/css">
		
		#switch_theme{margin-left:2em; cursor:pointer; background:#eee; padding:4px 6px; width:120px; text-align:center; font-weight:bold; border:1px solid #999;}
		#reload_data{margin-left:2em; cursor:pointer; background:#eee; padding:4px 6px; width:120px; text-align:center; font-weight:bold; border:1px solid #999;}
		
		.t-highlight1{background-color:#ccf;}
		.p-highlight1{background-color:#fcc;}
		
		.timeline-highlight-label-start .label_t-highlight1{color:#f00;}
		.timeline-highlight-label-end .label_t-highlight1{color:#aaf;}
		
		.timeline-band-events .important{color:#f00;}		
		.timeline-band-events .small-important{background:#c00;}
		
		
		/*---------------------------------*/
		
		.dark-theme {color:#eee;}
		.dark-theme .timeline-band-0 .timeline-ether-bg{background-color:#333}
		.dark-theme .timeline-band-1 .timeline-ether-bg{background-color:#111}
		.dark-theme .timeline-band-2 .timeline-ether-bg{background-color:#222}
		.dark-theme .timeline-band-3 .timeline-ether-bg{background-color:#444}
		
		
		.dark-theme .t-highlight1{background-color:#003;}
		.dark-theme .p-highlight1{background-color:#300;}
		
		.dark-theme .timeline-highlight-label-start .label_t-highlight1{color:#f00;}
		.dark-theme .timeline-highlight-label-end .label_t-highlight1{color:#115;}
		
		.dark-theme .timeline-band-events .important{color:#c00;}		
		.dark-theme .timeline-band-events .small-important{background:#c00;}
		
		.dark-theme .timeline-date-label-em{color:#fff;}
		.dark-theme .timeline-ether-lines{border-color:#555; border-style:solid;}
		.dark-theme .timeline-ether-highlight{background:#555;}
		
		.dark-theme .timeline-event-tape,
		.dark-theme .timeline-small-event-tape{background:#f60;}
		.dark-theme .timeline-ether-weekends{background:#111;}
	</style>
</head>
<body onload="onLoad();" onresize="onResize();" oncontextmenu="return false;">
	<div>
		<div style="margin-top:1em;">
			<a href="javascript:themeSwitch();" class="button">Theme</a>
			<a href="javascript:reloadData();" class="button">Refresh</a>
			<a href="javascript:moveToFirst();" class="button" >First Event</a>
			<a href="javascript:moveToLatest();" class="button" >Last Event</a>
		</div>
		<div id="tl" class="timeline-default" style="height: 400px; margin-top:1em;" />
	</div>
	<div id="tl2" class="control" style="margin-top:1em;"></div>
</body>
</html>
